<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>见缝插针游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .game-container {
            background: white;
            border-radius: 15px;
            padding: 5px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: 100%;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2.5em;
        }
        
        .game-area {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
        }
        
        #gameCanvas {
            border: 3px solid #333;
            border-radius: 8px;
            background: #f0f0f0;
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }
        
        .game-info {
            flex: 1;
            text-align: left;
        }
        
        .score-board {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .score-board h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .score-board p {
            margin: 5px 0;
            font-size: 18px;
            font-weight: bold;
        }
        
        .controls {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .controls h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .controls p {
            margin: 5px 0;
            font-size: 14px;
        }
        
        .game-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #28a745;
            color: white;
        }
        
        .btn-primary:hover {
            background: #218838;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #545b62;
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .game-container {
                padding: 5px;
            }
            
            .game-area {
                flex-direction: column;
                align-items: center;
            }
            
            .game-info {
                width: 100%;
            }
            
            .score-board, .controls {
                padding: 8px;
                margin-bottom: 10px;
            }
            
            .controls p {
                font-size: 12px;
            }
            
            h1 {
                font-size: 1.8em;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>🎯 见缝插针</h1>
        
        <div class="game-area">
            <canvas id="gameCanvas" width="400" height="400"></canvas>
            
            <div class="game-info">
                <div class="game-buttons">
                    <button class="btn-primary" onclick="startGame()">开始游戏</button>
                    <button class="btn-secondary" onclick="pauseGame()">暂停游戏</button>
                    <button class="btn-secondary" onclick="resetGame()">重新开始</button>
                </div>
                
                <div class="score-board">
                    <h3>📊 游戏统计</h3>
                    <p>分数: <span id="score">0</span></p>
                    <p>当前关卡: <span id="level">1</span></p>
                    <p>已发射: <span id="needles">0</span>/<span id="target">8</span></p>
                    <p>最高分: <span id="highScore">0</span></p>
                </div>
                
                <div class="controls">
                    <h3>🎯 操作说明</h3>
                    <p>点击屏幕发射针</p>
                    <p>避免针与针碰撞</p>
                    <p>完成目标数量进入下一关</p>
                    <p>空格键暂停/继续</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 游戏常量
        const CENTER_X = canvas.width / 2;
        const CENTER_Y = canvas.height / 2;
        const CIRCLE_RADIUS = 80;
        const NEEDLE_LENGTH = 60;
        const NEEDLE_WIDTH = 3;
        
        // 游戏状态
        let circle = {
            x: CENTER_X,
            y: CENTER_Y,
            radius: CIRCLE_RADIUS,
            rotation: 0,
            rotationSpeed: 0.02
        };
        
        let needles = [];
        let flyingNeedle = null;
        let gameRunning = false;
        let gamePaused = false;
        let score = 0;
        let level = 1;
        let targetNeedles = 8;
        let launchedNeedles = 0;
        let highScore = localStorage.getItem('needleHighScore') || 0;
        let gameLoop;
        
        // 针的类
        class Needle {
            constructor(angle, isFlying = false) {
                this.angle = angle;
                this.isFlying = isFlying;
                this.distance = isFlying ? 0 : CIRCLE_RADIUS;
                this.targetDistance = CIRCLE_RADIUS;
                this.speed = 8;
                this.attached = false;
            }
            
            update() {
                if (this.isFlying && this.distance < this.targetDistance) {
                    this.distance += this.speed;
                    if (this.distance >= this.targetDistance) {
                        this.distance = this.targetDistance;
                        this.isFlying = false;
                        this.attached = true;
                    }
                }
            }
            
            draw() {
                const x = circle.x + Math.cos(this.angle) * this.distance;
                const y = circle.y + Math.sin(this.angle) * this.distance;
                const endX = circle.x + Math.cos(this.angle) * (this.distance + NEEDLE_LENGTH);
                const endY = circle.y + Math.sin(this.angle) * (this.distance + NEEDLE_LENGTH);
                
                ctx.strokeStyle = this.isFlying ? '#dc3545' : '#333';
                ctx.lineWidth = NEEDLE_WIDTH;
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(endX, endY);
                ctx.stroke();
                
                // 针头
                ctx.fillStyle = this.isFlying ? '#dc3545' : '#333';
                ctx.beginPath();
                ctx.arc(endX, endY, 4, 0, 2 * Math.PI);
                ctx.fill();
            }
            
            getEndPosition() {
                const endX = circle.x + Math.cos(this.angle) * (this.distance + NEEDLE_LENGTH);
                const endY = circle.y + Math.sin(this.angle) * (this.distance + NEEDLE_LENGTH);
                return { x: endX, y: endY };
            }
        }
        
        // 初始化游戏
        function initGame() {
            circle.rotation = 0;
            circle.rotationSpeed = 0.02;
            needles = [];
            flyingNeedle = null;
            gameRunning = false;
            gamePaused = false;
            score = 0;
            level = 1;
            targetNeedles = 8;
            launchedNeedles = 0;
            
            updateScore();
            updateLevel();
            updateNeedles();
            updateHighScore();
            drawGame();
        }
        
        // 绘制游戏
        function drawGame() {
            // 清空画布
            ctx.fillStyle = '#f0f0f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制中心圆
            ctx.fillStyle = '#fff';
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();
            
            // 绘制中心点
            ctx.fillStyle = '#333';
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, 5, 0, 2 * Math.PI);
            ctx.fill();
            
            // 绘制所有针
            needles.forEach(needle => {
                needle.draw();
            });
            
            // 绘制飞行中的针
            if (flyingNeedle) {
                flyingNeedle.draw();
            }
        }
        
        // 更新游戏状态
        function updateGame() {
            if (!gameRunning || gamePaused) return;
            
            // 更新圆盘旋转
            circle.rotation += circle.rotationSpeed;
            
            // 更新针的角度（跟随圆盘旋转）
            needles.forEach(needle => {
                if (needle.attached) {
                    needle.angle += circle.rotationSpeed;
                }
            });
            
            // 更新飞行中的针
            if (flyingNeedle) {
                flyingNeedle.update();
                
                // 检查碰撞
                if (checkCollision(flyingNeedle)) {
                    gameOver();
                    return;
                }
                
                // 针到达目标位置
                if (flyingNeedle.attached) {
                    needles.push(flyingNeedle);
                    flyingNeedle = null;
                    launchedNeedles++;
                    score += 10;
                    updateScore();
                    updateNeedles();
                    
                    // 检查是否完成关卡
                    if (launchedNeedles >= targetNeedles) {
                        nextLevel();
                    }
                }
            }
            
            drawGame();
        }
        
        // 检查碰撞
        function checkCollision(newNeedle) {
            const newEnd = newNeedle.getEndPosition();
            
            for (let needle of needles) {
                const existingEnd = needle.getEndPosition();
                const distance = Math.sqrt(
                    Math.pow(newEnd.x - existingEnd.x, 2) + 
                    Math.pow(newEnd.y - existingEnd.y, 2)
                );
                
                if (distance < 15) { // 碰撞阈值
                    return true;
                }
            }
            
            return false;
        }
        
        // 下一关
        function nextLevel() {
            level++;
            targetNeedles = 8 + level * 2; // 每关增加2个针
            launchedNeedles = 0;
            circle.rotationSpeed += 0.005; // 增加旋转速度
            
            updateLevel();
            updateNeedles();
            showMessage(`恭喜！进入第${level}关`);
        }
        
        // 游戏结束
        function gameOver() {
            gameRunning = false;
            
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('needleHighScore', highScore);
                updateHighScore();
            }
            
            showMessage(`游戏结束！得分：${score}`);
        }
        
        // 开始游戏
        function startGame() {
            if (gameRunning) return;
            
            gameRunning = true;
            gamePaused = false;
            
            gameLoop = setInterval(updateGame, 16); // 约60FPS
        }
        
        // 暂停游戏
        function pauseGame() {
            if (!gameRunning) return;
            
            gamePaused = !gamePaused;
            if (gamePaused) {
                showMessage('游戏已暂停');
            }
        }
        
        // 重置游戏
        function resetGame() {
            clearInterval(gameLoop);
            initGame();
        }
        
        // 发射针
        function launchNeedle() {
            if (!gameRunning || gamePaused || flyingNeedle) return;
            
            // 计算发射角度（从底部向上）
            const angle = -Math.PI / 2; // 向上
            
            flyingNeedle = new Needle(angle, true);
        }
        
        // 更新分数显示
        function updateScore() {
            document.getElementById('score').textContent = score;
        }
        
        // 更新关卡显示
        function updateLevel() {
            document.getElementById('level').textContent = level;
        }
        
        // 更新针数显示
        function updateNeedles() {
            document.getElementById('needles').textContent = launchedNeedles;
            document.getElementById('target').textContent = targetNeedles;
        }
        
        // 更新最高分显示
        function updateHighScore() {
            document.getElementById('highScore').textContent = highScore;
        }
        
        // 显示消息
        function showMessage(text) {
            const messageDiv = document.createElement('div');
            messageDiv.textContent = text;
            messageDiv.style.position = 'fixed';
            messageDiv.style.top = '50%';
            messageDiv.style.left = '50%';
            messageDiv.style.transform = 'translate(-50%, -50%)';
            messageDiv.style.background = 'rgba(0, 0, 0, 0.8)';
            messageDiv.style.color = 'white';
            messageDiv.style.padding = '20px';
            messageDiv.style.borderRadius = '10px';
            messageDiv.style.fontSize = '18px';
            messageDiv.style.zIndex = '1000';
            
            document.body.appendChild(messageDiv);
            
            setTimeout(() => {
                document.body.removeChild(messageDiv);
            }, 2000);
        }
        
        // 鼠标点击事件
        canvas.addEventListener('click', launchNeedle);
        
        // 触摸事件
        canvas.addEventListener('touchstart', (event) => {
            event.preventDefault();
            launchNeedle();
        });
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.key === ' ') {
                pauseGame();
            } else if (e.key === 'Enter' || e.key === ' ') {
                launchNeedle();
            }
        });
        
        // 初始化游戏
        window.addEventListener('load', initGame);
    </script>
</body>
</html>